<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title></title>
	<style type="text/css">
		*{
			margin: 0;
			padding: 0;
		}
		.paging{
			display: flex;
			text-align: center;
		}
		.pageIndex{
			display: flex;
		}
		.pageIndex span{
			width: 30px;
			height: 30px;
			border: 1px solid black;
			margin: 5px;
			text-align: center;
			line-height: 30px;
		}
		.active{
			background: blue;
			color: white;
			border-color: blue;
		}
		li{
			list-style: none;
		}
	</style>
</head>
<body>
	<ul>
		<!-- <li>
			<span></span>
			<span></span>
			<span></span>
		</li> -->
	</ul>
	<div class="paging">
		<p class="left">上一页</p>
		<div class="pageIndex">
			<!-- <span class="active">1</span>
			<span>2</span>
			<span>3</span>
			<span>4</span> -->
		</div>
		<p class="right">下一页</p>
	</div>
	<script type="text/javascript">

		//定义页数
		let pages = 5
		let pageIndex = document.querySelector('.pageIndex')
		//生成页面d
		for(let i = 0; i < pages; i++){
			pageIndex.innerHTML += `<span>${i+1}</span>`
			document.querySelector('span').className = "active"
		}

		// 获取所有页吗
		let spans = document.querySelectorAll('.pageIndex span')
		for(let i = 0; i < spans.length; i++){
			spans[i].onclick = function() {
				page(this.innerText)
				//清空上一个class
				document.querySelector('.active').className = ''
				this.className = 'active'
			}
		}

		//上一页下一页
		let left = document.querySelector('.left')
		let right = document.querySelector('.right')

		left.onclick = function() {
			let nowAct = document.querySelector('.active')
			if (nowAct.previousElementSibling) {
				nowAct.previousElementSibling.onclick()
			}else{
				alert("没有上一页了")
			}
		}
		right.onclick = function() {
			let nowAct = document.querySelector('.active')
			if (nowAct.nextElementSibling) {
				nowAct.nextElementSibling.onclick()
			}else{
				alert("没有下一页了")
			}
		}


		let ul = document.querySelector('ul')
		//登录
		function login() {
			//1.application/x-www-form-urlencoded
			let xhr = new XMLHttpRequest()
			//2.
			xhr.open("post", "http://wish.byesame.com/login")
			//请求头
			xhr.setRequestHeader("Content-Type", 'application/x-www-form-urlencoded')
			//发送数据
			xhr.send('userName=admin&passWord=123456')
			//接收数据
			xhr.onreadystatechange = function() {
				if(xhr.readyState == 4){
					let res = JSON.parse(xhr.responseText)
					console.log(res)
					//将token存储到本地 localStorage.setItem("属性名", "属性值")
					if (res.code == 200) {
						localStorage.setItem("token", res.data.token)
					}
				}
			}
		} 
		login()

		//许愿
		function page(val) {
			let xhr = new XMLHttpRequest()

			xhr.open("get", `http://wish.byesame.com/admin?page=${val}&rows=10`)
			xhr.setRequestHeader("token", localStorage.getItem('token'))
			xhr.send()

			xhr.onreadystatechange = function() {
				if(xhr.readyState == 4){
					let res = JSON.parse(xhr.responseText)
					console.log(res)
					if (res.code == 200) {
						ul.innerHTML = ''
						for(let i = 0; i < res.data.list.length; i++){
							ul.innerHTML += `<li>
												<span>${res.data.list[i].id}</span>
												<span>${res.data.list[i].userName}</span>
												<span onclick="del(${res.data.list[i].id})">删除</span>
											 </li>`
						}
					}
				}
			}
		}
		page(1)

		//删除
		function del(id) {
			//接口
			let xhr = new XMLHttpRequest()
			//2.
			xhr.open("delete", "http://wish.byesame.com/admin")
			xhr.setRequestHeader("token", localStorage.getItem('token'))
			xhr.setRequestHeader("Content-Type", 'application/x-www-form-urlencoded')
			xhr.send(`id=${id}`)
			xhr.onreadystatechange = function() {
				if(xhr.readyState == 4){
					let res = JSON.parse(xhr.responseText)
					console.log(res)
					//删除成功，更新数据
					if (res.code == 200) {
						page(1)
						alert('删除成功')
					}
				}
			}
		}
	</script>
</body>
</html>